<template>
   <section class="shop-list">
   	  	<el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="店铺名称:">
                        <el-input placeholder="Shop Name" v-model="filter.shopName" size="small"></el-input>
				    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="手机号:">
                        <el-input placeholder="Phone Number" v-model="filter.phoneNumber" size="small"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="邮箱:">
                        <el-input placeholder="Email" v-model="filter.email" size="small"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="服务状态:">
		                <el-select v-model="filter.serverStatus" size="small">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="试用中" value="TRIALS"></el-option>
                            <el-option label="服务中" value="SERICE"></el-option>
                            <el-option label="已到期" value="EXPIRED"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="店铺状态:">
		                <el-select v-model="filter.shopStatus" size="small">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已强制关闭" value="0"></el-option>
                            <el-option label="正常" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
              	<el-col :span="4">
                    <el-form-item label="注册时间:" width="100">
                        <el-date-picker
                                size="small"
                                style="width: 100%;"
                                v-model="gmtCreateInterval"
                                type="datetimerange"
                                :picker-options="pickerOptions1"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
                        </el-button>
                        <el-button size="small" type="primary" @click="submitSearch()" icon="search">查询</el-button>
                        <!-- <a :href="loadLink"> -->
                            <!--<el-button size="small" type="primary" @click="downLoadList()" icon="document">下载本页</el-button>-->
                        <!-- </a> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
				<el-col :span='24' class="hide_and_show">
					<el-form-item class="action_button_group_open">
						<a size="small" @click="downLoadList()" class="export">
							<el-button size="small" icon="el-icon-zoom-in">导出</el-button>
						</a>
					</el-form-item>
				</el-col>
			</el-row>
            <el-row class="margin-table">
                <el-table :data="tableList" v-model="tableList" border style="width: 100%;">
	                <el-table-column prop="name"  label="店铺名称" align='center'>
                        <template scope="scope">
                            <a target="_blank" :href="'https://trade.onloon.net/?shopId='+scope.row.id">
                                <span >{{scope.row.name}}</span>
                            </a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="contacts"  label="联系人" align='center'></el-table-column>
                    <el-table-column prop="address"  label="联系地址" align='center'>
                        <template scope="scope">
                            <span >{{scope.row.detailAddress}}</span>
                        </template>
                    </el-table-column>
	                <el-table-column prop="type"  label="项目类型" align='center'></el-table-column>
                    <el-table-column prop="mode"  label="项目模式" align='center'></el-table-column>
                    <el-table-column prop="period"  label="项目年限" align='center'></el-table-column>
                    <el-table-column prop="mobile"  label="手机号" align='center'></el-table-column>
                    <el-table-column prop="email"  label="邮箱" align='center'></el-table-column>
                    <el-table-column prop="posttime"  label="注册时间" align='center'>
                        <template scope="scope">
                            <span>{{scope.row.posttime | formatUpdateTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status"  label="店铺状态" align='center'>
                        <template scope="scope">
                            <span style="color:#20a0ff;" v-if="scope.row.status == '正常'">{{scope.row.status}}</span>
                            <span style="color:#ff4949;" v-else>{{scope.row.status}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="serviceStatus"  label="服务状态" align='center'>
                        <template scope="scope">
                            <span style="color:#20a0ff;" v-if="scope.row.serviceStatus == '服务中'">{{scope.row.serviceStatus}}</span>
                            <span style="color:#ff4949;" v-else>{{scope.row.serviceStatus}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="trackId"  label="推广链接ID" align='center'></el-table-column>
                    <el-table-column prop="channelId"  label="渠道ID" align='center'></el-table-column>
                    <el-table-column prop="postip"  label="注册IP" align='center'></el-table-column>
	                <el-table-column prop="option" label="操作" align='center' width="100" fixed="right">
	                    <template scope="scope">
                            <el-button v-if="scope.row.status == '关闭'" size="mini" type="primary" icon="circle-check" @click="del(scope.$index, scope.row)">开启店铺</el-button>
                            <el-button v-else size="mini" type="danger" icon="circle-close" @click="del(scope.$index, scope.row)">强制关店</el-button>
	                        <el-button style="margin-left:0" size="mini" type="primary" icon="el-icon-zoom-in" @click="toShopDetail(scope.$index, scope.row)">查看详情</el-button>
	                    </template>
	                </el-table-column>
                </el-table>
            </el-row>
		    <el-row class="paging" style='margin-top: 40px;'>
		        <el-pagination
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 50,100]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount">
		        </el-pagination> 
      		</el-row>
   	  	</el-form>
   </section>
</template>

<script>
	import Vue from 'vue'
	import {mapGetters} from 'vuex'
	import {Row, Col, Form, FormItem, Button ,Select,Option,DatePicker,Table,Pagination,TableColumn,Input,Message,MessageBox,Dialog} from 'element-ui'
	import {getDate} from '../../utils/auth'
	import { BTOCSHOPMANAGE_TOTALCOUNT, BTOCSHOPMANAGE_CURRENTPAGE, BTOCSHOPMANAGE_PAGESIZE } from '../../store/mutation-types/btoc-shop/index.js'

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Button);
    Vue.use(Select);
    Vue.use(Input);
    Vue.use(Option);
    Vue.use(DatePicker);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Pagination);
    Vue.use(Dialog)
    
    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
    export default {
    	head(){
            return {
                title: "用户列表",
                meta: [
                    { hid: 'shopManage', name: 'shopManage', content: 'shopManage'}
                ]
            }
        },
        data() {
            return {
                tabName: '用户列表',
                handleFlag:false,
                loadLink:'#',
                filter:{
	      			shopName:'',//品牌名称
	      			phoneNumber:'',//cookie
                    email: '',
	      			serverStatus: '',//最近一次抓取结果
                    shopStatus:'',//最近一次抓取结果
                    registerTimeBegin: '', //添加时间开始
                    registerTimeEnd: '',  //添加时间结束
	      			pageSize: 50, // 每页条数
					pageNum: 1
      		    },
      		    gmtCreateInterval:[],//添加时间 
      		    lastTimeInterval:[],//最近一次抓取时间
      		    options:[],
      		    tableList:[],
      		    sauronBrandCookieId:'',
		        listData:[],
		        pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                logPreload:{},
                downPreload:{}
            };
        },
        methods: {
            toShopDetail(index,shop){
                this.$router.push({path: '/b2cAdmin/buyerDetail?id=' + shop.id +'&name=' + shop.name });
            },
        	handleCurrentChange(val) {
        		this.$store.commit('BTOCSHOPMANAGE_CURRENTPAGE',{data:val});
        		this.getSearchCookieList()
	        },
	        handleSizeChange(val) {
	        	this.$store.commit('BTOCSHOPMANAGE_PAGESIZE',{data:val})
				this.getSearchCookieList();
	        },
            empty(){//清空筛选条件
            	let pageSize = this.filter.pageSize;
                let pageNum = this.filter.pageNum;
	    		this.filter = {
	    			shopName:'',//品牌名称
	      			phoneNumber:'',//cookie
                    email: '',
                    registerTimeBegin: '', //添加时间开始
                    registerTimeEnd: '',  //添加时间结束
	      			serverStatus:'',//最近一次抓取结果
                    shopStatus:'',//最近一次抓取结果
	      			pageSize: pageSize, // 每页条数
					pageNum: pageNum
	    		}
	    		this.searchId='',
	    		this.gmtCreateInterval=[],
	    		this.lastTimeInterval=[];
	    		this.$store.commit('BTOCSHOPMANAGE_CLEAR_FILTER',null)
	    	},
	    	submitSearch(){
	    		this.getSearchCookieList();
	    		this.$store.commit('BTOCSHOPMANAGE_SET_FILTER',{filter:this.filter})
	    	},
            downLoadList(){
                if(this.totalCount <=0){
                    this.$message({type: 'error',message: '数据条目需大于零！'});
                    return;
                }
                
                let arr = [];
                let key;
                var token = window.localStorage.getItem('token');
                for(key in this.downPreload){
                    arr.push(key+'='+this.downPreload[key])
                }
                arr.push('total='+this.totalCount);
                arr.push('token='+token);
                var p =arr.join("&");
                var a = document.createElement('a');
                a.href = process.env.baseUrl + '/admin/shop/down?'+p;
                //a.target = '_blank';
                a.id='exppub';
                document.body.appendChild(a);
                var alink = document.getElementById('exppub');
                alink.click();
                alink.parentNode.removeChild(a);
            },
	    	getSearchCookieList(){//查询获取列表
	    		if(this.gmtCreateInterval&&this.gmtCreateInterval[0]){
	    			this.filter.registerTimeBegin = this.gmtCreateInterval[0]?getDate(this.gmtCreateInterval[0],true):'';
                    this.filter.registerTimeEnd =  this.gmtCreateInterval[1]?getDate(this.gmtCreateInterval[1],true):'';
	    		}else{
					this.filter.registerTimeBegin = ''
					this.filter.registerTimeEnd = ''
				}
                this.logPreload = {
                    name:this.filter.shopName,
                    mobile:this.filter.phoneNumber,
                    email: this.filter.email,
                    serviceType:this.filter.serverStatus,//TRIALS试用中，SERICE服务中，EXPIRED已到期
                    status:this.filter.shopStatus,
                    outTradeNo:'',
                    onLine:'',//ONLINE  OFFLINE
                    startTime: this.filter.registerTimeBegin?this.filter.registerTimeBegin:null,
                    endTime: this.filter.registerTimeEnd?this.filter.registerTimeEnd:null,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize
                }
	    		this.$store.dispatch("getBuyerSearchList",this.logPreload).then(res=>{
	    			if(!res) {return ;}
	    			let result=res.data;
	    			this.$store.commit('BTOCSHOPMANAGE_TOTALCOUNT',{data:result.data.total})
                    //接口请求成功
                    this.downPreload = this.logPreload;
	    			if(result.code == 0 && result.data){
	    				this.tableList=result.data.list;
	    				for(var i = 0; i < this.tableList.length; i++){
	    					if(this.tableList[i].checkStatus>0){
								this.tableList[i].checkStatus = "成功"; 
							}else{
								this.tableList[i].checkStatus = "失败"; 
							}
	   					}			
	    			}
	    		}).catch((error) => {})
    	    },
    	    del(index,row) {//强制关店
                if(row.status == '关闭'){
                    this.$confirm('确认开启店铺：  '+row.name+' 吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.sureDelete(row.id,row.status);
                    }).catch(() => {
                        this.cancelDelete();
                    });
                    // this.$message({type: 'info',message: '店铺已处于关闭状态！'});
                    // return;
                }else{
                    this.$confirm('确认关闭店铺：  '+row.name+' 吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.sureDelete(row.id,row.status);
                    }).catch(() => {
                        this.cancelDelete();
                    });
                }
		        
            },           
            cancelDelete(){//取消关闭
            	
            },           
            sureDelete(id,status){//确认删除
            	this.$store.dispatch("forcedCloseShop",{
            		shopId:id,
                    status:status == '正常'?'0':'1'
            	}).then(res=>{
            		if(!res) {return ;}
            		if(res && res.data.successed){
	            		this.getSearchCookieList();
                        if(status == '正常'){
                            this.$message({type: 'success',message: '关闭成功!'});
                        }else{
                            this.$message({type: 'success',message: '开启成功!'});
                        }
	            		
            		}
            	})
            }
        },
        computed : {
            ...mapGetters({
               'pageTabsList': 'getPageTabsList',
               'currentPage': 'currentPageShopManage',
               'totalCount': 'totalCountShopManage',
               'pageSize': 'pageSizeShopManage',
            })
        },
        filters: {
            formatUpdateTime(time) {
                if(!time) return '';
                let date = new Date(time);
                return getDate(date,true)
            },
            formatAudioTime(value) {
                let min = Math.floor(value/60);
                let sec = value%60;
                return min+"分 "+sec+"秒"
            }
        },
        mounted() {
            if(this.$store.state.btocShop.m_registerTimeBegin.length){
                this.gmtCreateInterval = [new Date(this.$store.state.btocShop.m_registerTimeBegin),new Date(this.$store.state.btocShop.m_registerTimeEnd)]
            }
            this.getSearchCookieList();
        },
        created(){
            //pageTab
            this.filter.shopName = this.$store.state.btocShop.m_shopName;
	        this.filter.phoneNumber = this.$store.state.btocShop.m_phoneNumber;
            this.filter.email = this.$store.state.btocShop.m_email;
            this.filter.serverStatus = this.$store.state.btocShop.m_serverStatus;
            this.filter.shopStatus = this.$store.state.btocShop.m_shopStatus;
	        this.filter.registerTimeBegin = this.$store.state.btocShop.m_registerTimeBegin;
	        this.filter.registerTimeEnd = this.$store.state.btocShop.m_registerTimeEnd;
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
            
        }
    }
</script>

<style lang="scss">
	.shop-list{
		margin-top: 20px;
		a, a:hover, a:focus, a:visited{
			color: #20a0ff;
		}
		.margin-table {
			.el-icon-close{padding-right: 20px;}
			.input_text .el-input__inner{padding-right: 25px;}
		}
		.module-opera-top{
			.el-form-item{margin-bottom: 50px !important;}
		}
		.el-form--inline .el-form-item__label{
			float: left !important;
		}
	}
</style>